<template>
  <div class="c2cTrade">
    <Other-Header index="1" bgColor="#5741d9"></Other-Header>
    <section class="mainSection orderSection clearfix">
      <div class="leftBox fl">
        <h3 class="orderHeader">
          <div class="orderTitle">
            <template v-if="orderinfo.orderType==1">{{$t('l.order_about0a', [orderinfo.another])}}</template>
            <template
              v-else-if="orderinfo.orderType==2"
            >{{$t('l.order_about0b', [orderinfo.another])}}</template>
            <template
              v-else-if="orderinfo.orderType==3"
            >{{$t('l.order_about47a', [orderinfo.another])}}</template>
            <template
              v-else-if="orderinfo.orderType==4"
            >{{$t('l.order_about47b', [orderinfo.another])}}</template>
            <span class="orderAmount">
              <em>{{orderinfo.quantity}}</em>
              {{orderinfo.currencyCode}}
            </span>
          </div>
        </h3>

        <!-- 交易信息 -->
        <div class="orderBox priceAbout clearfix" style="margin-top: 25px;">
          <div class="boxInner">
            <div class="boxRow">
              <div class="boxCol fl wid33" style="border-right:1px solid #e7e7e7">
                <span class="titleName">{{$t('l.order_about9')}}</span>
                <br />
                <span>{{orderinfo.totalPrice}} {{orderinfo.legalCurrencyCode}}</span>
              </div>
              <div class="boxCol fl wid33" style="border-right:1px solid #e7e7e7">
                <span class="titleName">{{$t('l.order_about11')}}</span>
                <br />
                <span>{{orderinfo.price}} {{orderinfo.legalCurrencyCode}}</span>
              </div>
              <div class="boxCol fl wid33">
                <span class="titleName">{{$t('l.order_about10')}}</span>
                <br />
                <span>{{orderinfo.quantity}} {{orderinfo.currencyCode}}</span>
              </div>
            </div>
            <div class="boxRow">
              <div class="boxCol fl wid33" style="border-right:1px solid #e7e7e7">
                <span class="titleName">{{$t('l.order_about1')}}</span>
                <br />
                <span>{{orderinfo.orderNo}}</span>
              </div>
              <div class="boxCol fl wid33" style="border-right:1px solid #e7e7e7">
                <span class="titleName">{{$t('l.order_about13')}}</span>
                <br />
                <span>
                  <span class="paybox">
                    <img v-if="orderinfo.payMode==1" src="../../assets/images/pay_zfb.png" alt />
                    <img
                      v-else-if="orderinfo.payMode==2"
                      src="../../assets/images/pay_weixin.png"
                      alt
                    />
                    <img
                      v-else-if="orderinfo.payMode==3"
                      src="../../assets/images/pay_cards.png"
                      alt
                    />
                  </span>
                  {{orderinfo.payMode==1 ? $t('l.order_about13a') : (orderinfo.payMode==2 ? $t('l.order_about13b') : $t('l.order_about13c'))}}
                </span>
              </div>
              <div class="boxCol fl wid33">
                <span class="titleName">{{$t('l.order_about56')}}</span>
                <br />
                <span v-if="orderinfo.status==1" class="color-paid">{{$t('l.order_list16')}}</span>
                <span v-else-if="orderinfo.status==2" class="color-confirm">{{$t('l.order_list17')}}</span>
                <span
                  v-else-if="orderinfo.status==3"
                  class="color-cancelled"
                >{{$t('l.order_list19')}}</span>
                <span v-else-if="orderinfo.status==4">{{$t('l.order_list20')}}</span>
                <span
                  v-else-if="orderinfo.status==5"
                  class="color-completed"
                >{{$t('l.order_list18')}}</span>
              </div>
            </div>
          </div>
          <div class="fr tradeRate">
            <span>
              {{$t('l.order_about14a')}}
              <em>{{$t('l.order_about14b')}}</em>
            </span>
          </div>
        </div>
        <!-- 收款信息 -->
        <div class="orderBox priceInfo clearfix" v-if="payStep==1||payStep==4||payStep==6">
          <div class="title">{{isSeller ? $t('l.order_about35') : $t('l.order_about7')}}</div>
          <div class="boxInner">
            <div class="inlineCol">
              <span class="paybox">
                <img v-if="orderinfo.payMode==1" src="../../assets/images/pay_zfb@2x.png" alt />
                <img
                  v-else-if="orderinfo.payMode==2"
                  src="../../assets/images/pay_weixin@2x.png"
                  alt
                />
                <img
                  v-else-if="orderinfo.payMode==3"
                  src="../../assets/images/pay_cards@2x.png"
                  alt
                />
              </span>
              {{orderinfo.payMode==1 ? $t('l.order_about13a') : (orderinfo.payMode==2 ? $t('l.order_about13b') : $t('l.order_about13c'))}}
            </div>
            <div class="inlineCol">{{orderinfo.accountName}}</div>
            <div class="inlineCol">{{orderinfo.accountNumber}}</div>
            <div class="inlineCol">{{orderinfo.bank}}</div>
            <div class="inlineCol">{{orderinfo.branchBank}}</div>
            <div class="inlineCol" v-show="orderinfo.payMode==1 || orderinfo.payMode==2">
              <span class="qrCode"></span>
              <el-popover placement="right" width="178" trigger="click">
                <img width="178" height="240" :src="orderinfo.qrCode" alt />
                <el-button
                  slot="reference"
                  class="show"
                  type="text"
                  style="width:0;"
                >{{$t('l.order_about16')}}</el-button>
              </el-popover>
            </div>
          </div>
        </div>
        <!-- (购买/出售)-买方-待支付 -->
        <div class="orderInfo" v-if="payStep==1">
          <div class="submitBox">
            <div class="tradeState">
              <img src="../../assets/images/icon_arranging.png" alt />
            </div>
            <div class="tradeMessage">
              {{$t('l.order_about19', [showTime.min, showTime.sec, orderinfo.another])}}
              <span
                class="payMoney"
              >{{orderinfo.totalPrice}}{{orderinfo.legalCurrencyCode}}。</span>
              {{$t('l.add_122')}}
              <p style="color:#EF5756;">
                {{$t('l.add_123')}}
                <span style="color:#33385E;">{{$t('l.add_142')}}</span>
              </p>
            </div>
            <div class="optionBtn">
              <el-button class="btn-normal" @click="onCancelOrder">{{$t('l.order_about21')}}</el-button>
              <el-button
                type="primary"
                class="btn-primary"
                @click="onPayConfirm"
              >{{$t('l.order_about20')}}</el-button>
            </div>
          </div>
          <div class="noticeBox">
            <div class="title">{{$t('l.order_about22')}}</div>
            <div style="overflow: hidden;">
              <p>{{$t('l.order_about23')}}</p>
              <p>{{$t('l.order_about24')}}</p>
            </div>
          </div>
        </div>
        <!-- (购买/出售)-卖方-待确认 -->
        <div class="orderInfo" v-if="payStep==2">
          <div class="submitBox">
            <div class="tradeState">
              <img src="../../assets/images/icon_arranging.png" alt />
            </div>
            <div class="tradeMessage">
              <span>{{$t('l.order_about39', [showTime.min, showTime.sec])}}</span>
            </div>
            <div class="optionBtn">
              <el-button
                class="btn-normal"
                @click="onAppeal"
                :disabled="orderinfo.countdown>0"
              >{{$t('l.order_about32')}}</el-button>
              <el-button
                type="primary"
                class="btn-primary"
                @click="onPayReceive"
              >{{$t('l.order_about40')}}</el-button>
            </div>
          </div>
          <div class="noticeBox">
            <div class="title">{{$t('l.order_about22')}}</div>
            <div style="overflow: hidden;">
              <p>{{$t('l.order_about41')}}</p>
              <p>{{$t('l.order_about42')}}</p>
            </div>
          </div>
        </div>
        <!-- (购买/出售)-(买方/卖方)-已完成 -->
        <div class="orderInfo" v-if="payStep==3">
          <div class="submitBox">
            <div class="tradeState">
              <img src="../../assets/images/icon_arranging_green.png" alt />
            </div>
            <div class="tradeMessage">
              <span>{{$t('l.order_about33')}}</span>
            </div>
          </div>
        </div>
        <!-- (购买/出售)-卖方-待支付 -->
        <div class="orderInfo" v-if="payStep==4">
          <div class="submitBox">
            <div class="tradeState">
              <img src="../../assets/images/icon_arranging.png" alt />
            </div>
            <div
              class="tradeMessage"
            >{{$t('l.order_about38', [showTime.min, showTime.sec, orderinfo.totalPrice+orderinfo.legalCurrencyCode])}}</div>
          </div>
        </div>
        <!-- (购买/出售)-买方-待确认 -->
        <div class="orderInfo" v-if="payStep==5">
          <div class="submitBox">
            <div class="tradeState">
              <img src="../../assets/images/icon_arranging.png" alt />
            </div>
            <div class="tradeMessage">
              <span>{{$t('l.order_about29')}}</span>
            </div>
            <div class="optionBtn">
              <el-button
                class="btn-normal"
                @click="onAppeal"
                :disabled="orderinfo.countdown>0"
              >{{$t('l.order_about32')}}</el-button>
            </div>
          </div>
        </div>
        <!-- (购买/出售)-(买方/卖方)-已取消 -->
        <div class="orderInfo" v-if="payStep==6">
          <div class="submitBox">
            <div class="tradeState">
              <img src="../../assets/images/icon_arranging_cancel.png" alt />
            </div>
            <div class="tradeMessage">
              <span>{{true ? $t('l.order_about54') : $t('l.order_about51')}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="rightBox fr">
        <Instructions></Instructions>
      </div>
        <!--安全校验-->
        <div class="popWraper" v-show="ischeck && status=='phone'">
            <div class="popInter">
                <div class="popHead">
                    <h2>{{popWraper_text}}</h2>
                    <i class="close" @click.stop="ischeck = false;verifyCode = ''"></i>
                </div>
                <div class="popbody">
                    <div class="popcon">
                        <p class="grouptitle">{{$t('l.personal_43')}}</p>
                        <input class="comput small disabled" v-model="account" disabled="disabled" style="width:100%;">
                        <div class="putgroup clearfix padtop">
                            <input class="comput small" :placeholder="$t('l.personal_44')" v-model="verifyCode" style="width:210px;">
                            <p class="errortext"></p>
                            <button v-show="sendAuthCode" class="codebtn active" @click="sendPhoneCode">{{$t('l.personal_45')}}</button>
                            <button v-show="!sendAuthCode" class="codebtn">{{auth_time}}s</button>
                        </div>
                        <a class="btn allcell" @click.stop="affirm">{{$t('l.personal_186')}}</a>
                    </div>
                </div>
            </div>
        </div>
        <!--邮箱校验-->
        <div class="popWraper"  v-show="ischeck && status=='email'">
            <div class="popInter">
                <div class="popHead">
                    <h2>{{popWraper_text}}</h2>
                    <i class="close" @click.stop="ischeck = false;verifyCode = ''"></i>
                </div>
                <div class="popbody">
                    <div class="popcon">
                        <p class="grouptitle">{{$t('l.personal_46')}}</p>
                        <input class="comput small disabled" disabled="disabled" v-model="account" style="width:100%;">
                        <div class="putgroup clearfix padtop">
                            <input class="comput small" placeholder="$t('l.personal_44')" v-model="verifyCode" style="width:210px;">
                            <p class="errortext"></p>
                            <button v-show="sendAuthCode" class="codebtn active fr" @click="sendEmailCode">{{$t('l.personal_45')}}</button>
                            <button v-show="!sendAuthCode" class="codebtn">{{auth_time}}s</button>
                        </div>
                        <a class="btn allcell" @click.stop="affirm">{{$t('l.personal_186')}}</a>
                    </div>
                </div>
            </div>
        </div>
        <!--谷歌校验-->
        <div class="popWraper" v-show="ischeck && status=='ga'">
            <div class="popInter">
                <div class="popHead">
                    <h2>{{popWraper_text}}</h2>
                    <i class="close" @click.stop="ischeck = false;verifyCode = ''"></i>
                </div>
                <div class="popbody">
                    <div class="popcon">
                        <p class="grouptitle">{{$t('l.personal_47')}}</p>
                        <input class="comput small" v-model="verifyCode" placeholder="$t('l.personal_44')" style="width:100%;">
                        <a class="btn allcell martop30" @click.stop="affirm">{{$t('l.personal_186')}}</a>
                    </div>
                </div>
            </div>
        </div>      
    </section>
    <chat :detailsId="detailsId"></chat>
    <Footer></Footer>
  </div>

</template>

<script>
import { api } from "@/api/api";
import OtherHeader from "@/components/otherHeader";
import Footer from "@/components/footer";
import Instructions from "@/components/instructions";
import Chat from "./chat";

export default {
  inject: ["reload"],
  data() {
    return {
      status: 2,
      payStep: 7,
      isSeller: false, // 判断是买家还是卖家
      dialogVisible: false,
      uploadDialogVisible: false,
      onceToken: "",
      orderinfo: {
        orderNo: "",
        another: "",
        currencyCode: "",
        legalCurrencyCode: "",
        orderAmount: "",
        quantity: "",
        price: "",
        orderType: 1,
        time: "",
        accid: ""
      },
      showTime: "",
      timer: null,
      detailsId: "",
      status:'phone',
      account:"",
      ischeck:false,
      verifyCode:"",
      sendAuthCode:true,
      auth_time:120,
      popWraper_text:""
    };
  },
  async created() {
    this.getOrderDetail();
    let intro = this.$store.state.userintro;
    if (intro.gaEnabled == 1) {
      this.status = "ga";
    } else if (intro.phoneEnabled == 1) {
      this.status = "phone";
    } else if (intro.emailEnabled == 1) {
      this.status = "email";
    }
    if (this.status == "phone") {
      this.account = this.$store.state.userintro.cellPhone;
    } else if (this.status == "email") {
      this.account = this.$store.state.userintro.email;
    }
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    formate(time) {
      if (time >= 10) {
        return time;
      } else {
        return `0${time}`;
      }
    },
    // 获取订单详情
    async getOrderDetail() {
      let res = await api.orderDetail({
        orderNo: this.$route.params.id
      });
      let { code, data, msg } = res.data;

      if (code == 0) {
        Object.assign(this.orderinfo, data);
        this.setOrderStep(data.orderType, data.status);
        this.detailsId = this.orderinfo.accid;
      } else {
        this.$layer.msg(msg);
      }
    },
    //获取一次性token
    async createOnceToken() {
      let res = await api.createOnceToken();
      let { code, data } = res.data;

      if (code == 0) {
        this.onceToken = data.resultToken;
      }
    },
    
    //倒计时
    getAuthCode() {
        this.sendAuthCode = false;
        this.auth_time = 120;
        var auth_timetimer =  setInterval(()=>{
            this.auth_time--;
            if(this.auth_time<=0){
                this.sendAuthCode = true;
                clearInterval(auth_timetimer);
            }
        }, 1000);
    }, 
    //发送邮箱验证码
    async sendEmailCode(){
        let that = this;
        let res = await api.sendEmailCode({
            email:that.account,
            type:"W"
        })
        if(res.data.code==0){
            that.$layer.msg(that.$t('l.other_a_38'));
            that.getAuthCode();
        }else{
            that.$layer.msg(res.data.msg);
        }
    },
    //发送手机验证码
    async sendPhoneCode(){
        let that = this;
        let res = await api.sendPhoneCode({
            areaCode:that.$store.state.userintro.phoneArea,
            phone:that.account,
            type:"W"
        })
        if(res.data.code==0){
            that.$layer.msg(that.$t('l.other_a_38'));
            that.getAuthCode();
        }else{
            that.$layer.msg(res.data.msg);
        }
    },
    // 取消订单
    async orderCancel() {
      let that = this;
      let res = await api.orderCancel({
        orderNo: this.orderinfo.orderNo,
        onceToken: this.onceToken
      });
      let { code, data, msg } = res.data;
      if (code == 0) {
        this.$layer.msg(that.$t("l.order_about52"));
        // 跳转到我的订单页面
        this.$router.push("/myOrder");
      } else {
        this.$layer.msg(msg);
        // this.createOnceToken();
      }
    },
    // 获取当日订单取消数
    async getCancelCount() {
      let res = await api.cancelOrderCount();
      let { code, data, msg } = res.data;

      if (code == 0) {
        return data;
      }
      return 0;
    },
    // 支付订单 true-收款 false-付款
    async orderPay(v_code) {
      let apiMethod = v_code ? "orderReceive" : "orderPay";
      let toastSuccess = v_code
        ? this.$t("l.order_about57")
        : this.$t("l.order_about58");
      let res = await api[apiMethod]({
        orderNo: this.orderinfo.orderNo,
        onceToken: this.onceToken,
        verifyCode :v_code
      });
      let { code, data, msg } = res.data;
      if (code == 0) {
        this.$layer.msg(toastSuccess);
        this.getOrderDetail();
        this.ischeck=false;
      } else {
        this.$layer.msg(msg);
        // this.createOnceToken();
      }
    },
    // 确认转款
    onPayConfirm() {
      let title = this.$t("l.order_about25");
      let btnText = this.$t("l.order_about28");
      let content = this.$t("l.order_about26");

      this.$alert(content, title, {
        confirmButtonText: btnText,
        customClass: "order-message content-center",
        callback: action => {
          if (action === "confirm") {
            this.orderPay();
          }
        }
      });
    },
    // 确认收款
    onPayReceive() {
      // if (this.orderinfo.countdown <= 0) return;
      this.popWraper_text = this.$t("l.order_about45");
      this.ischeck = true;
    },
    affirm() {
      this.orderPay(String(this.verifyCode).trim());
    },
    // 确认取消
    async onCancelOrder() {
      let count = await this.getCancelCount();
      let title = this.$t("l.order_about48");
      let btnText = this.$t("l.order_about50");
      let limitTip = this.$t("l.order_about49");
      let content = count == 2 ? this.$t("l.order_about55") : limitTip;

      this.$alert(content, title, {
        confirmButtonText: btnText,
        customClass: "order-message content-large",
        callback: action => {
          if (action === "confirm") {
            this.orderCancel();
          }
        }
      });
    },
    onAppeal() {
      this.$router.push(`/appeal/${this.orderinfo.orderNo}`);
    },
    // 判断订单状态来显示到哪一步骤
    setOrderStep(orderType, status) {
      let that = this;
      let isSeller = (this.isSeller = orderType == 2 || orderType == 3);

      if (!isSeller && status == 1) {
        this.payStep = 1;
      } else if (isSeller && status == 1) {
        this.payStep = 4;
      } else if (status == 2 && !isSeller) {
        this.payStep = 5;
      } else if (status == 2 && isSeller) {
        this.payStep = 2;
      } else if (status == 5) {
        this.payStep = 3;
      } else if (status == 3) {
        this.payStep = 6;
      }

      if (this.payStep == 1 || this.payStep == 2 || this.payStep == 4) {
        let countdown = this.orderinfo.countdown;

        if (countdown > 0) {
          this.timer = setInterval(() => {
            if (countdown < 0) {
              clearInterval(that.timer);
              that.reload();
              return;
            }

            let min = Math.floor(countdown / 60);
            let sec = countdown - min * 60;
            let showTime = {
              min: this.formate(min),
              sec: this.formate(sec)
            };

            this.showTime = showTime;

            this.orderinfo.countdown = countdown -= 1;
          }, 1000);
        } else {
          this.showTime = {
            min: "00",
            sec: "00"
          };
        }
      }
    }
  },
  components: {
    OtherHeader,
    Footer,
    Instructions,
    Chat
  },
  mounted() {
    this.createOnceToken();
  }
};
</script>
<style lang="less" scoped>
// c2c common style
.c2cTrade {
  background-color: #f7f8fc;
  position: relative;
  min-height: 100%;
  width: 100%;
  padding-top: 100px;
  
  .mainSection {
    width: 1200px;
    margin: 20px auto 0;
    // height: calc(100vh - 250px);
    height: 1020px;
    padding-bottom: 160px;
    box-sizing: border-box;
  }
  .leftBox {
    width: 850px;
    height: 100%;
    box-sizing: border-box;
    padding: 46px 35px;
    background: #fff;
  }
  .rightBox {
    width: 334px;
    height: 100%;
    padding: 32px 32px 27px;
    background: #fff;
    box-sizing: border-box;
    overflow-y: scroll;
  }
  .wid50 {
    width: 50%;
  }
  .wid20 {
    width: 20%;
  }
  .wid33 {
    width: 33.33%;
  }
  .color-confirm {
    color: #f78900;
  }
  .color-completed {
    color: #0da88b;
  }
  .color-cancelled {
    opacity: 0.7;
  }
  .color-paid {
    color: #ef5756;
  }
}
// order box common
.orderBox {
  .title {
    height: 22px;
    font-size: 16px;
    font-familya: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(51, 56, 94, 1);
    line-height: 22px;
    margin-bottom: 14px;
  }
  .boxInner {
    box-sizing: border-box;
    background-color: #f2f6fa;
    padding: 45px 0;
    font-size: 14px;
    overflow: hidden;
  }
  .boxRow {
    overflow: hidden;
    &:not(:first-child) {
      margin-top: 46px;
    }
  }
  .boxCol {
    text-align: center;
    line-height: 24px;
    box-sizing: border-box;
    color: #33385e;
  }
  .tradeItem {
    text-align: left;
    &.row {
      display: table-row;
      line-height: 40px;
    }
    &:not(last-child) {
      margin-bottom: 20px;
    }
    .cell {
      display: table-cell;
    }
  }
}
// order section
.orderSection {
  .orderHeader {
    text-align: center;
    position: relative;
    .orderTitle {
      font-size: 16px;
      color: rgba(51, 51, 51, 1);
      font-weight: 500;
      font-familya: PingFangSC-Medium;
      > span {
        font-familya: "Roboto Medium";
      }
    }
    .orderAmount {
      > em {
        font-size: 24px;
        font-style: normal;
        color: #2d8dfe;
      }
    }
    .orderNo {
      font-size: 14px;
      color: #33385e;
      position: absolute;
      right: 0;
      margin-top: 5px;
      > em {
        font-style: normal;
        padding-left: 8px;
      }
    }
  }
  .priceAbout {
    .titleName {
      font-size: 12px;
      color: #33385e;
      opacity: 0.5;
    }
    .tradeRate {
      font-size: 14px;
      margin-top: 10px;
      em {
        font-style: normal;
        color: #0da88b;
      }
    }
    .paybox {
      display: inline-block;
      vertical-align: middle;
      img {
        margin-top: 4px;
      }
    }
  }
  .payAbout {
    margin-top: 38px;
    .titleName {
      vertical-align: top;
      padding-left: 50px;
      padding-right: 36px;
    }
  }
  .submitBox {
    margin-top: 52px;
    text-align: center;

    .optionBtn {
      margin-top: 12px;
      .el-button {
        display: inline-block;
        vertical-align: middle;
        width: 200px;
        height: 40px;
        line-height: 40px;
        padding: 0;
        text-align: center;
        border-radius: 4px;
        // border: 0 none;
        box-sizing: border-box;
      }
      .btn-normal:not(.is-disabled) {
        // background: rgba(255, 255, 255, 1);
        // border: 1px solid #dde0eb;
        color: #33385e;
        &:hover {
          color: #606266;
        }
      }
      .btn-primary {
        background: linear-gradient(90deg, #3360ff 0%, #04a6fe 100%);
        color: #fff;
        &.is-disabled {
          opacity: 0.38;
        }
      }
    }
  }
  .tradeState {
    margin-bottom: 20px;
  }
  .tradeMessage {
    max-width: 355spx;
    margin: 0 auto;
    line-height: 24px;
  }
  .color-red {
    color: #ef5756;
  }
  .paybox {
    display: inline-block;
    vertical-align: middle;
  }
  .priceInfo {
    margin-top: 22px;
    .boxInner {
      padding: 25px 48px;
      color: #333;
    }
    .inlineCol {
      display: table-cell;
      padding-right: 43px;
      vertical-align: middle;
      height: 32px;
      line-height: 32px;
    }
    .paybox {
      display: inline-block;
      height: 32px;
      vertical-align: middle;
      margin-right: 20px;
    }
    .show {
      border: 0 none;
      color: #2d8dfe;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}

.noticeBox {
  margin-top: 36px;
  .title {
    float: left;
    font-size: 14px;
    font-familya: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    line-height: 20px;
    margin-right: 16px;
  }
  p {
    font-size: 13px;
    font-familya: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(51, 56, 94, 1);
    line-height: 22px;
  }
}

.qrCode {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  background: url(../../assets/images/icon_qrcode.png) no-repeat left center;
  cursor: pointer;
}
</style>
<style lang="less">
.order-message.el-message-box {
  width: 452px;
  padding-bottom: 40px;
  .el-message-box__header {
    padding: 16px 15px 15px 23px;
    background: #f2f6fa;
  }
  .el-message-box__title {
    height: 24px;
    font-size: 16px;
    font-familya: PingFangSC-Medium;
    font-weight: 500;
    color: #33385e;
    line-height: 24px;
  }
  .el-message-box__content {
    font-size: 14px;
    color: #33385e;
    height: 138px;
    padding: 57px 67px 0;
    text-align: left;
    box-sizing: border-box;
  }
  &.content-center .el-message-box__content {
    text-align: center;
  }
  &.content-large .el-message-box__content {
    padding: 42px 52px;
  }
  .el-message-box__btns {
    text-align: center;
  }
  .el-button {
    width: 318px;
    background: linear-gradient(90deg, #3360ff 0%, #04a6fe 100%);
    border-radius: 4px;
    &:hover,
    &:focus {
      color: #fff;
    }
  }
}

.el-popover.el-popper {
  margin-left: -6px;
}
</style>


